<template>
<el-container class="main_container">
  <!-- 头部布局 -->
  <el-header>
    <!-- 左边Logo和项目名称 -->
    <div class="left_box">
      <img src="../assets/img/hospitalLogo.png" alt="">
      <span><font face="LiSu" size=5>人民医院预约挂号管理系统</font></span>
      
    </div>
    <!-- 右边用户头像布局 -->
    <div class="right_box">
      <el-dropdown>
        <!--  <img src="../assets/img/logo.png" alt="">
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-house">系统首页</el-dropdown-item>
          <el-dropdown-item icon="el-icon-user">个人信息</el-dropdown-item>
          <el-dropdown-item icon="el-icon-switch-button" @click="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu> -->
        <div class="block">
                    <!-- <el-avatar :size="50" :src="userInfo.avatar"  style="cursor: pointer;"></el-avatar> -->
                    <el-avatar :size="50" fit="scale-down" :src="userInfo.avatar" style="padding-left:5px"></el-avatar>
                </div>
                <el-dropdown-menu slot="dropdown" trigger="click">
                    <el-dropdown-item>
                        <span type="danger" @click="welcome"><span class="el-icon-house"></span> &nbsp;系统首页</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <span type="danger" @click="getInformation"><span class="el-icon-user"></span> &nbsp;个人信息</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <span type="danger" @click="logout"><span class="el-icon-switch-button"></span> &nbsp;退出登入</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
  <el-container>
    <!-- 侧边布局 -->
    <el-aside :width="isOpen==true?'64px':'200px'" style="background-color: #FFFFFF">
      <div class="toggle-btn" @click="toggleMenu" style="background-color: #FFFFFF">|||</div>
        <el-row class="tac">
             <el-menu
                :collapse="isOpen"
                :router="true"
                :collapse-transition="false"
                unique-opened
                @open="handleOpen"
                @close="handleClose"
                >
            <Menu :menuData="menuData"></Menu>
                </el-menu>   
        </el-row>    
    </el-aside>
    <el-main>
      <!-- 路由视图 -->
      <router-view>
        
      </router-view>
    </el-main>
  </el-container>
</el-container>

</template>

<script>
import Menu from '../components/Menu'
import {getMenuTree} from '../api/menu'
import MenuTree from '../components/MenuTree'
import {doLogout} from '../api/login'
import {getUserInfo} from '../api/login'
import { mapMutations } from 'vuex'
import { USERLOGOUT } from '../store/types'

export default {
    name: 'Main',
    components: {Menu},
    data(){
      return {
                menuData: [],
                isOpen: false,
                userInfo: {},
                loading: true,
            };
    },
    methods:{
      ...mapMutations([USERLOGOUT]),
       toggleMenu() {
        this.isOpen = !this.isOpen;
        },
      handleOpen(key, keyPath) { 
        console.log(key, keyPath); 
        },
      handleClose(key, keyPath) { 
          console.log(key, keyPath);
          },
           async getTree() {
                console.log("加载菜单信息.........");
                const res = await getMenuTree()
                console.log(res);
                //获取菜单失败
                if (res.data.code !== 200) {
                    //展示权限不足的网页
                    this.$router.push("/3001");
                    return this.$message.error({
                        showClose: true,
                        message: res.message,
                        center: true,
                        duration: 1000
                    })
                }
                // 获取菜单成功
                /*this.$message.success({
                    showClose: true,
                    message: res.message,
                    center: true,
                    duration: 1000
                })*/
                this.menuData = res.data.data.menuTree;
            },
            async getUserInfo() {
                console.log("加载用户信息.........");
                const res = await getUserInfo();
                console.log(res);
                this.userInfo = res.data.data.userInfo;
            },
      /**
             *
             * 退出登入
             */
            async logout() {
                var res = await this.$confirm("此操作将退出系统, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消退出登入"
                    });
                });
                if (res == "confirm") {
                    const res = await doLogout();
                    console.log(res)
                    if (res.data.code == 200){
                        this[USERLOGOUT]()
                        this.$router.push("/login");
                    }
                }
            },
            getInformation() {
               this.$router.push("/information");
            },
            welcome() {
               this.$router.push("/welcome");
            },
            
    },
     created() {
            this.getTree();
            setTimeout(() => {
                this.loading = false;
            }, 500);
        },

     mounted(){
            this.getUserInfo();
        },
}
 </script>
 
   ///*   */
<style lang="less" scoped>
  .main_container{
    height: 100%;
  }

  .el-header {
    padding-left: 0;
    display: flex;
    background-color: #4cd5e7;
    color: rgb(255, 255, 255);
    justify-content: space-between;
    align-items: center;
    font-size: 18px;


    .left_box{
      display: flex;
      justify-content: center;
      align-items: center;
      
      img{
        width: 60px;
        height: 60px;
        margin-left: 40px;
      }

      span{
        margin-left: 10px;
        
      }
    }
  }

  .right_box{
    .el-dropdown>img{
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background-color: #FFFFFF;
      margin: 0px 10px 0px 0px;
      background-size: contain;
    }
  }
  
  .el-aside {
    background-color: #FFFFFF;
   // color: #333;
    line-height: 200px;
      .toggle-btn{
        //background-color:#FFFFFF;
        // background-color:	#778899;
        font-size: 15px;
        font-weight: bold;
        line-height: 24px;
        color: rgb(91, 92, 92);
        letter-spacing: 0.2em;
        text-align: center;
        cursor: pointer;
      }
  }
  
  .el-main {
    background-color: #E9EEF3;
  }

   .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  
  </style>